import React, { useState } from 'react';
import { Modal } from 'antd';
import ProTable from '@ant-design/pro-table';
import { approvalOperateLogDetail } from '@/pages/laborSupervision/laborWageIssueManage/service';
import { isUrl } from '@/utils/utils';
import FileOpen from '@/components/FileIframOpen';
let isFirst = true;
const ActionRecordDetail: React.FC<any> = ({ visible, cancel, info }) => {
  const [operateData, setOperateData] = useState<any>({});
  const [fileUrl, setFileUrl] = useState<any>('');
  const [fileUrlVisible, setFileUrlVisible] = useState<any>(false);

  const listRequest = async (params: any) => {
    console.log(params, 'params');
    params.pageNo = params.current;
    delete params.current
    const response = await approvalOperateLogDetail({ id: info.id, ...params });
    if (isFirst && response.success) {
      setOperateData(response.data && response.data[0]);
    }
    isFirst = false;
    return response;
  };

  const columns: any = [];
  if (operateData) {
    Object.keys(operateData).map((item: any) => {
      columns.push({
        title: item,
        dataIndex: item,
        width: 200,
        render: (_: any, record: any) => {
          return isUrl(record[item]) ? (
            <a
              onClick={() => {
                setFileUrl(record[item]);
                setFileUrlVisible(true);
              }}
            >
              查看
            </a>
          ) : (
            <span>{record[item]}</span>
          );
        },
      });
    });
  }

  return (
    <Modal
      title="处理明细"
      onCancel={() => {
        isFirst = true;
        cancel();
      }}
      visible={visible}
      footer={null}
      width={'900px'}
      destroyOnClose
    >
      {operateData ? (
        <ProTable
          headerTitle={info.projectName || ''}
          rowKey="id"
          request={listRequest}
          columns={columns}
          rowSelection={false}
          options={false}
          search={false}
        // pagination={false}
        />
      ) : (
        <span style={{ display: 'inline-block', textAlign: 'center', width: '100%' }}>
          暂无数据
        </span>
      )}
      {fileUrlVisible ? (
        <FileOpen
          title={''}
          fielUrl={fileUrl}
          modalVisible={fileUrlVisible}
          onCancel={() => {
            setFileUrlVisible(false);
            setFileUrl('');
          }}
        />
      ) : null}
    </Modal>
  );
};

export default ActionRecordDetail;
